<template>
    <div class="sg-container">
        <div class="sg-item" @click="changeIndex(index)" :class="value===index?'active':''"
             v-bind:key="`sg-item-${index}`" v-for="(item,index) in items">
            {{item}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "hl-segment",
        props: {
            items: {
                type: Array,
                default: function () {
                    return []
                }
            },
            value: {
                default: 0,
            }
        },
        methods: {
            changeIndex(index){
                this.$emit('input',index)
                this.$emit('onChangeSegment',index)
            }
        }
    }
</script>

<style scoped lang="less">
    .sg-container {
        height: 36px;
        color: #444;
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .sg-item {
            box-sizing: border-box;
            color: #444;
            background: #f2f2f2;
            text-align: center;
            border-radius: 5px 0 0 5px;
            width: 100px;
            line-height: 36px;
            font-size: 14px;
            border: solid 1px #f2f2f2;
            &.active {
                border: solid 1px #25a3ff;
                background: #fff;
                color: #25a3ff;
            }
            &:last-child {
                border-radius: 0 5px 5px 0;
            }
        }
    }
</style>